<template>
	<view class="page-appoint">
		<u-tabs :list="list1" @click="click"></u-tabs>
		<u-search  style="border:1px;" placeholder='请输入车牌' :show-action="false" v-model="value"></u-search>
		<u-search  style="border:1px;" placeholder='请输入订单号' :show-action="false" v-model="value1"></u-search>
		<u-button size="medium" style="width:200px;" text="搜索" @click="btnClick" type="info"></u-button>
		
		
		<view class="appoint-item" v-for="item in list" :key="item.id">
					              <view style="margin-right:25rpx" >委托单号：{{item.orderon}}</view>
								    <view style="margin-right:25rpx" >司机名称：{{item.cname}}</view>
								  <view style="margin-right:25rpx" >预约时间：{{item.times}}</view>
								  <view style="margin-right:25rpx" >船名：{{item.qm}}</view>
								  <view style="margin-right:25rpx" >航次：{{item.hc}}</view>
								  <view style="margin-right:25rpx" >货主：{{item.shdw}}</view>
								  <view style="margin-right:25rpx" >操作过程：{{item.czgc}}</view>
								  <view style="margin-right:25rpx" >货位：{{item.hw}}</view>
					              <view style="margin-right:25rpx">车牌过磅班次：{{item.datelist.name1}}-{{item.datelist.name2}}</view>
					              <view style="margin-right:25rpx" >车牌：{{item.cp}}  司机：{{item.cname}}</view>
					              <view style="margin-right:25rpx">过磅车队：{{item.cdlist.cdname?item.cdlist.cdname:'当前车队已删除'}}</view>
					              <view style="margin-right:25rpx">货名：{{item.hname}}  进场重量：{{item.mz}}</view>
					<view>
						<view class="fv" v-show="item.status==1" @click="erweima(item)">确认理货</view>
					
					</view>
				
				
		</view>
		
		<view class="appoint-item"  v-show="list.length==0">
				<view >暂无预约数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				value1: '',
				
				list1: [{
					name: '未确认',
				}, {
					name: '已确认',
				}],
				udata:'',
				list:[],
				currentTab:1,
				orderon:'',
			}
		},
		async onLoad(){
				this.init();
		},
		methods: {
			change(value) {
				// 搜索框内容变化时，会触发此事件，value值为输入框的内容
				console.log(value);
				this.value = value
			},
			change1(value) {
				// 搜索框内容变化时，会触发此事件，value值为输入框的内容
				console.log(value);
				this.value1 = value
			},
		
			btnClick(){
				this.init()
			},
		
			click(item) {
			    console.log('item', item);
				if(item.name=='未确认'){
					this.currentTab = 1
					this.init()
				}
				if(item.name=='已确认'){
					this.currentTab = 2
					this.init()
				}
			},
				async erweima(e){
					console.log(e)
					let data = {
						id:e.id
						
					}
					let res =  await this.$api.lhok(data)
					if(res.data.code==0){
							this.init()
					}
				},
				// currentTabs(e){
				// 	this.currentTab = e
				// 	this.init()
				// },
				async getuserinfo(){
					let data = {
						id:uni.getStorageSync('uid')
					}
					let res =  await this.$api.getuserinfo(data)
					console.log(res.data.code)
				if(res.data.code==0){
					this.udata = res.data.data
				}
				},
				async init() {
					let data = {
						//id:uni.getStorageSync('uid'),
						id:13,
					}
					let res =  await this.$api.getuserinfo(data)
					if(res.data.code==0){
						this.udata = res.data.data
						let res1 =  await this.$api.getlhlist({cdid:res.data.data.liid,currentTab:this.currentTab,orderon:this.value1,cp:this.value})
						this.list = res1.data.data
					}
				},
		}
	}
</script>


<style lang="scss">
	.ss{
		margin-left: 30upx;
		height: 60upx;
		line-height: 60upx;
	}
	.fl{
		float: left;
	}
	.ord{
		border: 1upx solid #1F1F1F;
		height: 60upx;
		
		width: 40%;
		border-radius: 20upx;
		line-height: 80upx;
		//margin-top: 30upx;
	}
	.fv{
		float: left;
		border: 3upx solid #007AFF;
		padding: 10upx;
		width: 300upx;
		height: 80upx;
		font-size: 40upx;
		text-align: center;
		background-color: #4CD964;
		line-height: 60upx;
		margin-left: 30upx;
	}
	.atvs{
		width: 100%;
		height: 80upx;
		margin-top: 20upx;
	}
	.atvs view{
		float: left;
		height: 80upx;
		text-align: center;	
		line-height: 80upx;
		width: 20%;
	}
	.atv{
		width: 100%;
		height: 50upx;
	}
	.atv view{
		float: left;
		display: block;
		line-height:80upx;
		border: 1upx solid #888888;
		text-align: center;	
		height: 80upx;
		width: 49%;
		margin: 10upx auto;
	}
	.atc{
		color: #007AFF;
	}
.appoint-item {
	margin-top: 40upx;
	background-color: #fff;
	margin-bottom: 20upx;
	height: 900upx;
	padding: 20upx;
	padding-left: 40upx;
	position: relative;
	>view {
		margin-bottom: 20upx;
	}
	image {
		width: 40upx;
		height: 40upx;
		position: absolute;
		top: 20upx;
		right: 40upx;
		&.edit {
			right: 120upx;
		}
	}
}
</style>
